<template>
  <div class="container">
    <nav-bar title="分类" />
    <div class="category">
      <div class="category-first">
        <div 
          class="item" 
          :class="{'item-cur': categoryCurrentIndex === index}"
          v-for="(item, index) in categories" 
          :key="index"
          @click="categoryChecked(index, item)"
        >{{ item.Name }}</div>
      </div>
      <div class="category-second">
        <div 
          class="item"
          v-for="(item, index) in subCategories" :key="index"
          @click="goToProductList(item)"
        >{{item.Name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getCategories, getShopCategories } from '../../network/best'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      categories: [
        // {Id: 1, Name: '上装', SubCategories: [{Id: 1, Name: '长裤'},{Id: 1, Name: '中长裤'}]},
        // {Id: 2, Name: '配件', SubCategories: [{Id: 1, Name: '长裤'},{Id: 1, Name: '中长裤'}]},
        // {Id: 3, Name: '瑜伽', SubCategories: [{Id: 1, Name: '长裤'},{Id: 1, Name: '中长裤'}]},
        // {Id: 4, Name: '跑步', SubCategories: [{Id: 1, Name: '长裤'},{Id: 1, Name: '中长裤'}]},
        // {Id: 5, Name: '训练', SubCategories: [{Id: 1, Name: '长裤'},{Id: 1, Name: '中长裤'}]},
        // {Id: 6, Name: '休闲', SubCategories: [{Id: 1, Name: '长裤'},{Id: 1, Name: '中长裤'}]},
        // {Id: 7, Name: '游泳', SubCategories: [{Id: 1, Name: '长裤'},{Id: 1, Name: '中长裤'}]},
      ],
      categoryCurrentIndex: 0,
    }
  },
  computed: {
    subCategories(){
      let subCategories = []
      if(this.categories.length){
        subCategories = this.categories[this.categoryCurrentIndex].SubCategories
      }
      return subCategories
    }
  },
  mounted() {
    // 获取所有产品分类
    getCategories(list => {
      list.map(item => {
        item.sid = 0
        item.SubCategories.map(itemIn => {
          itemIn.sid = 0
          return itemIn
        })
        return item
      })
      this.categories = list

      // 获取场景分类
      getShopCategories(list => {
        list = list.filter(item => item.Id != 350)
        list.map(item => {
          item.sid = 1
          item.SubCategories.map(itemIn => {
            itemIn.sid = 1
            return itemIn
          })
          return item
        })
        this.categories = [...this.categories, ...list]
      })
    })
  },
  methods: {
    categoryChecked(index, item){
      this.categoryCurrentIndex = index

      // 如果没有子分类，直接跳转到商品列表
      if(item.SubCategories.length === 0){
        this.$router.push({
          path: '/productList',
          query: {
            cid: item.Id,
            sid: item.sid,
          }
        })
      }
    },
    goToProductList(item){
      this.$router.push({
        path: '/productList',
        query: {
          cid: item.Id,
          sid: item.sid,
        }
      })
    }
  },
}
</script>

<style scoped>
.container{
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}
.category{
  flex-grow: 1;
  display: flex;
  font-size: 14px;
}
.category-first{
  padding-top: 20px;
  width: 110px;
  background-color: #f2f2f2;
  text-align: center;
}
.category-second{
  padding-top: 20px;
  flex-grow: 1;
  padding-left: 48px;
}
.category .item{
  line-height: 20px;
  padding: 15px 0;
}
.category .item-cur{
  background: #ffffff;
}
</style>